<template>
	<div class="funds">
		<el-card class="box-card">
			<el-button slot="header" type="primary">
				<span>专户产品类别</span>
				<el-tooltip placement="right" effect="light" style="margin-right: -16px;display: flex;">
					<div slot="content" :style="wdData.accStyle">{{ wdData.accNotDateList }}</div>
					<span>
						截至时间：
						<el-date-picker
							:picker-options="pickerOption2"
							@change="getData"
							v-model="value1"
							type="date"
							:editable="false"
							size="mini"
							placeholder="选择日期"
						>
						</el-date-picker>
					</span>
				</el-tooltip>
			</el-button>
			<div>
				<el-tree :data="wdData.accData" :props="defaultProps" node-key="id" :default-expanded-keys="wdData.accDataId">
					<span class="span-ellipsis" slot-scope="{ node }">
						<span :title="node.label">{{ node.label }}</span>
					</span>
				</el-tree>
			</div>
		</el-card>
	</div>
</template>
<script>
	import { seplicInfo } from '@/api/productApi/home'
	import { timerConversionDate } from '@/filters'
	export default {
		data() {
			return {
				wdData: {
					accData: [],
					accDataId: [],
					accNotDateList: '',
					accDate: ''
				},
				value1: new Date(),
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				get pickerOption2() {
					return {
						disabledDate(time) {
							return time.getTime() > new Date().getTime()
						}
					}
				}
			}
		},

		mounted() {
			this.getData()
		},

		methods: {
			// 获取数据
			getData() {
				seplicInfo({ date: timerConversionDate(this.value1) }).then(res => {
					if (res.msgCode === 'Y') {
						this.wdData.accData = res.data.body.wdData
						this.wdData.accDataId = res.data.body.wdDataId
						this.wdData.accNotDateList = res.data.body.wdNotDateList ? res.data.body.wdNotDateList.join('\n') : ''
						this.wdData.accDate = res.data.body.date
						if (!!res.data.body.wdNotDateList && Array.isArray(res.data.body.wdNotDateList)) {
							if (res.data.body.wdNotDateList.length > 16) {
								this.wdData.accStyle = 'height:255px;white-space: pre-line;overflow-y:auto;'
							} else {
								this.wdData.accStyle = 'white-space:pre-line;'
							}
						}
					}
				})
			}
		}
	}
</script>
<style scoped  lang='scss' >
	::v-deep .el-input__inner {
		width: 100% !important;
	}
	::v-deep .el-date-editor {
		width: 100% !important;
	}
	::v-deep .el-input__prefix {
		display: none !important;
	}
	::v-deep .el-input__icon {
		display: none;
	}
	.funds {
		padding: 1% 0 0% 1%;
		width: 98%;
		height: 100%;
		overflow: auto;
	}
	.el-card {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
	::v-deep .el-card__header {
		padding: 0 0px 0 0px;
		//   background-color: $theme;
		color: white;
		button {
			height: 31px;
			display: flex;
			align-items: center;
			width: 100%;
			border: none;
			border-radius: 0;
			outline: none;
			background-color: #3d78cc !important;
			span {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					width: 50%;
				}
				span:nth-child(2) {
					display: block;
					text-align: right;
				}
			}
		}
	}
	.clearfix:after {
		display: none;
	}
	::v-deep .el-card__body {
		height: -moz-calc(100% - 32px);
		height: -webkit-calc(100% - 32px);
		height: calc(100% - 32px);
		overflow: auto;
		font-size: 13px;
	}
</style>
